<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    destroy-on-close
    @closeDialog="resetTemp"
    @comfirmBtn="submitForm"
  >
    <div class="roleInfo">
      <DtForm
        :form-opts="config"
        :width-size="2.1"
        :ref-obj.sync="config.ref"
        :rules="config.rules"
        label-width="130px"
        @handleEvent="handleEvent"
      />
    </div>

  </dtDialog>
</template>
<script>
import userFormApi from '@/framework/api/userDefined/userFrom'
import interfaceApi from '@/framework/api/workflow/interfaceManage/index'
import {getAppMagList} from '@/framework/api/applicationMag/applicationMag'
import { uuId } from '@/framework/utils/uuid'

export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      listLoading: false,
      config: {
        ref: null,
        labelWidth: '100px',
        formData: {
          customerFormName: '', // 表单名称
          appCode: '', // 所属应用
          formUrl: '', // 表单url
          customerFormCode: '', // 表单编码
          formInter: '', // 表单接口
          fieldInter: '' // 字段接口
        },
        columns: [
          {
            prop: 'customerFormName',
            label: '表单名称',
            maxlength: 20,
            component: 'el-input',
            type: 'text'

          },
          {
            prop: 'appCode',
            label: '所属应用',
            type: 'select-arr',
            component: 'el-select',
            list: 'groupTypeList',
            maxlength: 20,
            arrLabel: 'appName',
            arrKey: 'appCode',
            event: 'appCode'
          },
          {
            prop: 'formUrl',
            component: 'el-input',
            label: '表单url',
            type: 'text'
          },
          {
            prop: 'customerFormCode',
            component: 'el-input',
            label: '表单编码',
            type: 'text'
          },
          // {

          //   prop: 'formInter',
          //   label: '表单获取接口',
          //   type: 'select-arr',
          //   component: 'el-select',
          //   list: 'formInterface',
          //   maxlength: 20,
          //   arrLabel: 'label',
          //   arrKey: 'value'
          // },
          {
            prop: 'fieldGetInterfaceId',
            label: '字段获取接口',
            type: 'select-arr',
            component: 'el-select',
            list: 'fieldInterface',
            maxlength: 20,
            arrLabel: 'apiName',
            arrKey: 'id'
          }
        ],
        listTypeInfo: {
          groupTypeList: [
          ],
          formInterface: [
            {
              label: 'xxx接口',
              value: 1
            },
            {
              label: 'xxx接口',
              value: 2
            }
          ],
          fieldInterface: [

          ]
        },
        rules: {
          customerFormName: [
            { required: true, message: '请输入表单名称', trigger: 'blur' }
          ],
          appCode: [
            { required: true, message: '请选择所属应用', trigger: 'change' }
          ],
          formUrl: [
            { required: true, message: '请输入表单url', trigger: 'blur' }
          ],
          formInter: [
            { required: true, message: '请选择表单获取接口', trigger: 'blur' }
          ],
          fieldGetInterfaceId: [
            { required: true, message: '请选择字段获取接口', trigger: 'change' }
          ]
        }
      },

      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      textMap: {
        update: '修改自定义表单',
        create: '新增自定义表单'
      },
      dialogStatus: ''
    }
  },
  methods: {
    openDialog(type, row) {
      this.getAppList()
      this.getFiledList()
      this.resetTemp()
      this.dialogVisible = true
      if (type === 'create') {
        this.dialogStatus = 'create'
        this.config.columns[3].disabled = false
        this.$set(this.config.formData, 'customerFormCode', uuId(8))
      } else {
        this.dialogStatus = 'update'
        this.config.columns[3].disabled = true
        userFormApi.detail({ customFormId: row.customFormId }).then((res) => {
          this.config.formData = res.data
        })
      }
    },
    getFiledList() {
      interfaceApi.getApiPage({ pageNo: 1, pageSize: 10000, appCode: this.config.formData.appCode }).then((res) => {
        this.config.listTypeInfo.fieldInterface = res.data?.rows
      })
    },
    getAppList() {
      getAppMagList({"appSourceDistinguish":2}).then(res=>{
        this.config.listTypeInfo.groupTypeList = res.data
      })
      // interfaceApi.findAppList().then((res) => {
      //   this.config.listTypeInfo.groupTypeList = res.data
      // })
    },
    pagination() {
      this.getList()
    },
    resetTemp() {
      Object.assign(
        this.$data.config.formData,
        this.$options.data().config.formData
      )
      this.config.formData = {}
      this.config.ref?.resetFields()
    },
    // 提交按钮
    submitForm() {
      this.config.ref.validate((valid) => {
        if (valid) {
          if (this.dialogStatus === 'create') {
            userFormApi.addForm(this.config.formData).then((res) => {
              this.$parent.getList()
              this.dialogVisible = false
            })
          } else {
            userFormApi.updateForm(this.config.formData).then((res) => {
              this.$parent.getList()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    handleEvent(type, val, item) {
      if (type === 'appCode') {
        this.getFiledList()
        this.$set(this.config.formData, 'fieldGetInterfaceId', '')
      }
    }

  }
}
</script>

<style scope>

/* ::v-deep .t-form{
  justify-content: space-around;
} */

::v-deep .el-dialog{
  width:1000px;
}
.el-form .t-form{
  display: flex;
  justify-content: space-around;
}
</style>
